<%@ page contentType="text/html; charset=UTF-8" language="java" %>
<%@ include file="include.jsp" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<%@ include file="menu.jsp" %>


<link type="text/css" href="../css/ui-lightness/jquery-ui-1.7.2.custom.css" rel="stylesheet"/>
<link type="text/css" href="../css/newOrder.css" rel="stylesheet"/>
<script type="text/javascript" src="../js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="../js/jquery-ui-1.7.2.custom.min.js"></script>
<script type="text/javascript" src="../js/ui.datetimepicker.js"></script>
<script type="text/javascript">

    $(document).ready(function() {

        // dateTimePicker
        $('.datetimepicker').datetimepicker({ dateFormat: 'dd-mm-yy',timeFormat: ' hh:ii:ss' });


        $(".resource").find("a").click(function() {
            window.location = $(this).attr("href");
        });


        $(".resource").click(function() {
            $(this).next(".resource_info").slideToggle(500)
            return false;
        });


        $("#add_project").click(function() {
            $("#projects").show()
            return false;
        });


        $("#add").click(function() {
            var project = $("#projects option:selected").text();
            var projectId = $("#projects").val();
            if ($('#results option[value=' + projectId + ']').length > 0) {
                alert('Element already exists');
                return false;
            } else {
                $("#results").append("<option value='" + projectId + "'>" + project + "</option>")
                return false;
            }

        });

        $("#delete").click(function() {
            if (typeof $("#results option:selected").val() === "undefined") {
                alert('Выберите элемент!')
                return false;
            }
            $("#results option:selected").remove()
            return false;


        });

        $("#projects").change(function() {
            var currentProject = $(this).val();
            $("#projects option[value=default]").hide();
            $("#add").show()
        });

        $("#submit").click(function() {
            $("#results option").attr('selected', 'yes');
        });

    });

</script>
<style type="text/css">

    td{
        text-align:center;
    }
    .active {
        background-color: #E1FFA7;
    }

    .inactive {
        background-color: #FFDDDC;
    }

    .label {
        font-size: small;
        font-weight: bold;
    }

     .resource_info table {
        margin-left:15px;
		background-color: #FFFF99;
		border-collapse:collapse;

    }

    .resource_info td{
		padding-left:10px;
    }

    .resource_info {
        width: 300px;
    }

    .resource {
    / / padding-bottom : 5 px;
    }
</style>

<div class="title">Управление ресурсами</div>
<br>

<div class="grid">


    <table>
        <tr class="table_head">
            <td width="15%">Имя ресурса</td>
            <td width="35%">Период</td>
            <td width="20%">Проекты</td>
            <td width="10%">Хост</td>
            <td width="10%">Статус</td>
            <td width="5%" ></td>
            <td width="5%"></td>
        </tr>
    </table>
    <c:set var="count" value="0" scope="page"/>
    <c:forEach items="${resources}" var="r">
        <c:set var="count" value="${count + 1}" scope="page"/>
        <div class="resource">
            <table>
                <tr <c:if test="${(count % 2) == 0}"><c:out value="class=table_row_1"/></c:if> >

                    <td width="15%"><b><c:out value="${r.hostName}"/></b></td>
                    <c:set var="start" value="${r.startDate}"/>
                    <c:set var="finish" value="${r.finishDate}"/>

                    <td width="35%"><c:out value="${fn:substring(start,0,10)}"/> - <c:out
                            value="${fn:substring(finish,0,10)}"/></td>
                    <td width="20%">
                        <c:forEach items="${r.projects}" var="p">
                            <c:out value="${p.projectName}"/>&nbsp;
                        </c:forEach>
                    </td>
                    <td width="10%" ><c:out value="${r.host.hostName}"/></td>

                    <c:set var="statusName" value="${r.status.statusName}"/>
                    <td width="10%"
                            <c:if test="${statusName eq 'active'}"><c:out value="class=submitted"/></c:if>
                            <c:if test="${statusName eq 'inactive'}"><c:out value="class=in_progress"/></c:if>
                            >
                        <c:out value="${r.status.alias}"/></td>


                    <c:set var="editValue" value="/admin/createResource.htm"/>
                    <c:set var="deleteValue" value="/admin/deleteResource.htm"/>

                    <c:url var="editUrl" value="${editValue}">
                        <c:param name="action" value="edit"/>
                        <c:param name="resourceId" value="${r.resourceId}"/>
                    </c:url>
                    <c:url var="deleteUrl" value="${deleteValue}">
                        <c:param name="action" value="delete"/>
                        <c:param name="resourceId" value="${r.resourceId}"/>
                    </c:url>
                    <td >
                        <a href="${editUrl}"><img style="border:0px;" src="../images/edit.png" alt="Edit"></a>
                    </td>
                    <td >
                        <a href="${deleteUrl}"><img style="border:0px;" src="../images/delete_red.png" alt="Delete"></a>
                    </td>
                </tr>
            </table>
        </div>

        <div class="resource_info" style="display:none;">
            <table border="1">
                <tr style="background-color:#a1ffa6;">
                    <td colspan="2">Подробная информация</td>

                </tr>
                <tr>
                    <td class="label">Имя ресурса</td>
                    <td><c:out value="${r.hostName}"/></td>
                </tr>
                <tr>
                    <td class="label">IP Адрес</td>
                    <td><c:out value="${r.ipAddress}"/></td>
                </tr>
                <tr>
                    <td class="label">Логин</td>
                    <td><c:out value="${r.login}"/></td>
                </tr>
                <tr>
                    <td class="label">Пароль</td>
                    <td><c:out value="${r.password}"/></td>
                </tr>
                <tr>
                    <td class="label">CPU</td>
                    <td><c:out value="${r.cpu}"/>&nbsp;GHz</td>
                </tr>
                <tr>
                    <td class="label">RAM</td>
                    <td><c:out value="${r.ram}"/>&nbsp;GB</td>
                </tr>
                <tr>
                    <td class="label">HDD</td>
                    <td><c:out value="${r.hdd}"/>&nbsp;GB</td>
                </tr>
                <tr>
                    <td  class="label">Status</td>
                    <td><c:out value="${r.status.alias}"/></td>
                </tr>
            </table>
        </div>
    </c:forEach>


</div>

<div class="messages">

    <c:if test="${requestScope.errorMessage ne null}">
        <c:out value="${requestScope.errorMessage}"/>
    </c:if>

</div>

<br>

<div class="form">
    <form:form commandName="newResource">
        <fieldset>
            <table>
                <tr>
                    <td>Имя ресурса<span class="required">*</span></td>
                    <td><form:input path="hostName"/></td>
                    <td><form:errors path="hostName" cssStyle="color:red"/></td>

                    <td>Start Date <span class="required">*</span></td>
                    <td><form:input path="startDate" cssClass="datetimepicker"/></td>
                    <td><form:errors path="startDate" cssStyle="color:red"/></td>
                </tr>

                <tr>
                    <td>IP адрес<span class="required">*</span></td>
                    <td><form:input path="ipAddress"/></td>
                    <td><form:errors path="ipAddress" cssStyle="color:red"/></td>

                    <td>Finish Date <span class="required">*</span></td>
                    <td><form:input path="finishDate" cssClass="datetimepicker"/></td>
                    <td><form:errors path="finishDate" cssStyle="color:red"/></td>
                </tr>

                <tr>
                    <td>CPU, GHz <span class="required">*</span></td>
                    <td><form:select path="cpu">
                        <c:forEach items="${cpuList}" var="cpu">
                            <form:option value="${cpu}" label="${cpu} GHz"/>
                        </c:forEach>
                    </form:select>
                    </td>
                    <td><form:errors path="cpu" cssStyle="color:red"/></td>

                    <td>Логин<span class="required">*</span></td>
                    <td><form:input path="login"/></td>
                    <td><form:errors path="login" cssStyle="color:red"/></td>
                </tr>
                <tr>
                    <td>HDD, Gb <span class="required">*</span></td>
                    <td><form:select path="hdd">
                        <c:forEach items="${hddList}" var="hdd">
                            <form:option value="${hdd}" label="${hdd} Gb"/>
                        </c:forEach>
                    </form:select>

                    </td>
                    <td><form:errors path="hdd" cssStyle="color:red"/></td>

                    <td>Пароль<span class="required">*</span></td>
                    <td><form:input path="password"/></td>
                    <td><form:errors path="password" cssStyle="color:red"/></td>
                </tr>
                <tr>
                    <td>RAM, Gb <span class="required">*</span></td>
                    <td><form:select path="ram">
                        <c:forEach items="${ramList}" var="ram">
                            <form:option value="${ram}" label="${ram} Gb"/>
                        </c:forEach>
                    </form:select>
                    </td>
                    <td><form:errors path="ram" cssStyle="color:red"/></td>
                    <td>Хост<span class="required">*</span></td>
                    <td>
                        <form:select path="host">
                            <form:options items="${hosts}" itemValue="hostId" itemLabel="hostName"/>s
                        </form:select>
                    </td>
                </tr>


                <tr>
                    <td>Involved Projects<span class="required">*</span></td>
                    <td><form:select path="projects" multiple="multiple" size="5" id="results">
                        <c:if test="${editedResource ne null}">
                            <c:forEach items="${editedResource.projects}" var="p">
                                <option value="${p.projectId}"><c:out value="${p.projectName}"/></option>
                            </c:forEach>
                        </c:if>
                    </form:select>
                        <div>
                            <a href="#" id="add_project"> <img style="border:0px;" src="../images/add.png"></a>&nbsp;
                            <a href="#" id="delete"><img style="border:0px;" src="../images/delete.png"></a>
                        </div>
                    </td>
                    <td><form:errors path="projects" cssStyle="color:red"/></td>
                    <td>

                    </td>
                    <td>
                        <select id="projects" style="display:none;">
                            <option selected="selected" value="default">Выберите проект</option>
                            <c:forEach items="${projects}" var="p">
                                <option value="${p.projectId}"><c:out value="${p.projectName}"/></option>
                            </c:forEach>
                        </select>
                        <a href="#" id="add" style="display:none;">Add</a>
                    </td>
                    <td>

                    </td>


                </tr>


                <tr>
                    <td>Description</td>
                    <td><form:textarea cols="35" rows="5" path="description"/></td>
                    <td><form:errors path="description" cssStyle="color:red"/></td>


                </tr>
                <tr>
                    <td>Status <span class="required">*</span></td>
                    <td><form:select path="status">
                        <form:options items="${statuces}" itemValue="statusId" itemLabel="alias"/>
                    </form:select>

                    </td>
                    <td><form:errors path="status" cssStyle="color:red"/></td>
                </tr>

                <tr>
                    <td></td>
                    <td></td>
                    <td>

                         <spring:hasBindErrors name="newResource">
                        <c:if test="${not empty errors.globalErrors}">
                            <c:forEach items="${errors.globalErrors}" var="error">
                                <c:out value="${error.defaultMessage}"/>
                            </c:forEach>
                        </c:if>
                    </spring:hasBindErrors>

                    </td>
                    <td></td>
                    <td align="right"><input type="submit" value="submit" class="button" id="submit"></td>
                    <td></td>
                </tr>


            </table>
        </fieldset>
    </form:form>
</div>

